<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>示例报告</title>
    <!-- 引入 ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
  </head>
  <body>
    <!-- 模拟渲染后的 Markdown 内容 -->
    <h2>报告标题：黄金市场月度分析</h2>
    <h3>一、价格走势</h3>
    <p>本月黄金价格总体呈震荡上行，月初受……</p>
    <ul>
      <li>最高价：&yen;420</li>
      <li>最低价：&yen;400</li>
      <li>平均价：&yen;410</li>
    </ul>

    <!-- 折线图容器 -->
    <div id="chart1" style="width: 600px; height: 400px"></div>
    <!-- 柱状图容器 -->
    <div id="chart2" style="width: 600px; height: 400px"></div>

    <script>
      // 折线图示例
      var chart1 = echarts.init(document.getElementById("chart1"));
      var option1 = {
        title: { text: "价格折线图" },
        color: ["#3498db"],
        xAxis: {
          type: "category",
          data: ["周一", "周二", "周三", "周四", "周五"],
        },
        yAxis: { type: "value" },
        series: [{ type: "line", data: [400, 405, 410, 408, 415] }],
      };
      chart1.setOption(option1);

      // 柱状图示例
      var chart2 = echarts.init(document.getElementById("chart2"));
      var option2 = {
        title: { text: "成交量柱状图" },
        color: ["#f1c40f"],
        xAxis: {
          type: "category",
          data: ["周一", "周二", "周三", "周四", "周五"],
        },
        yAxis: { type: "value" },
        series: [{ type: "bar", data: [120, 200, 150, 180, 230] }],
      };
      chart2.setOption(option2);
    </script>
  </body>
</html>